<template>
  <!-- 科目管理 -->
  <!-- 杨友朋 -->
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-s-home" style="font-weight:bold"></i>  后台管理</el-breadcrumb-item>
        <el-breadcrumb-item><b>科目管理</b></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card style="margin-top:20px">
    <div style="float:left;width:200px;margin-bottom:20px">
      <el-button type="primary" @click="add()" size="small">添加</el-button>
        <el-popconfirm confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="delBetch" >
          <el-button type="primary" size="small" slot="reference" style="margin-left: 5px">批量删除</el-button>
        </el-popconfirm>
      </div>
        
        <div style="background-color: white; margin-top: 10px">
          <!-- 全查 -->
          <el-table :data="subjectData" style="width: 100%; margin-top: 10px; margin-left: 15px" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="subjectType" label="科目类型" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="上传时间" align="center">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope" >
                <el-popconfirm confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)">
                  <el-button type="primary" slot="reference" style="margin-left: 5px" size="small">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pages.pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.total"
            :current-page.sync="pages.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <!-- 添加父级科目 -->
        <el-dialog :visible.sync="addHandle" width="20%">
          <el-form stripe style="width: 100%" :model="form">
            <el-form-item>
              <el-input v-model="form.subjectType" placeholder="请输入科目类型" ></el-input>
            </el-form-item>
          </el-form>
          <el-button style=" background-color: rgb(234, 244, 255); color: rgb(96, 169, 255);" @click="addRole()" >确 定</el-button>
          <el-button @click="addHandle = false" style=" background-color: rgb(234, 244, 255); color: rgb(96, 169, 255); " >取 消</el-button >
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //条数
      total: 0,
      //父级科目数组
      subjectData: [],
      //父级科目id
      subjectId: 0,
      //添加父级科目按钮开关
      addHandle: false,
      //添加父级科目按钮开关
      addHandleClass:false,
      //添加父级科目按钮开关
      directoryHandle: false,
      //添加父级科目按钮开关
      upClassHandleClass:false,
      //父级科目
      subjectArr:[],
      ///id数组
      ids: [],
      //添加父级科目表单
      form: {},
      pages: {
        //当前页
        pageNum: 1,
        //每页几条数据 
        pageSize: 5, 
      },
    };
  },
  created() {
    //自启动
    this.selectSubject();
  },
  methods: {
    //选中行id存取id数组
    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },
    //打开添加父级科目页面
    add() {
      this.addHandle = true;
    },
    //添加父级科目
    addRole() {
      this.$axios
        .post("/subject/insertSubject", this.form)
        .then((res) => {
          if (res.data) {
            this.$message.success("添加成功");
            //清空表单
            this.form={}
            //关闭页面
            this.addHandle = false;
            //刷新
            this.selectSubject();
          } else {
            this.$message.error("添加失败");
          }
        });
    },
    //根据数组批量删除父级科目
    delBetch() {
      this.$axios
        .post("/subject/delSubjectByIds", this.ids)
        .then((res) => {
          if (res.data) {
            this.$message.success("批量删除成功");
            //刷新
            this.selectSubject();
          } else {
            this.$message.error("批量删除失败");
          }
        });
    },
    //根据id删除父级科目
    del(id) {
      this.$axios
        .get("/subject/delSubjectById?id=" + id)
        .then((res) => {
          if (res.data) {
            this.$message.success("删除成功");
            this.selectSubject();
          } else {
            this.$message.error("删除失败");
          }
        });
    },
    //全查父级科目
    selectSubject() {
      this.$axios
        .get("/subject/selectSubject", {
          params: {
            pageNum: this.pages.pageNum,
            pageSize: this.pages.pageSize,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            //父级科目数组赋值
            this.subjectData = res.data.data.content;
            this.pages.total = res.data.data.totalSize;
          }
        })
        .catch((err) => {});
    },
    //分页
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.selectSubject();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.selectSubject();
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    openadd() {
      this.updateadd = true;
    },
  },
};
</script>

<style>
</style>